<% content_for(:head) do %>
  <title>
    <%= t('.page_title', school_name: current_school.name) %>
  </title>
<% end %>
<div class="h-full py-10 bg-gray-50 md:py-24">
  <div class="container max-w-md p-6 mx-auto bg-white dark:bg-gray-100 dark:border dark:border-gray-300/25 rounded-lg shadow dark:shadow-lg sm:py-8">
    <div class="text-lg font-semibold sm:text-xl">
      <%= t('.heading') %>
    </div>
    <%= form_with(url: user_send_reset_password_email_path, method: :post, local: true) do |f| %>
      <div class="mt-4">
        <label class="inline-block text-sm font-semibold tracking-wide text-gray-900" for="email">
          <%= t('.email_label') %>
        </label>
        <%= f.email_field :email, maxlength: 256, placeholder: t('.email_placeholder'), required: true, class: 'block w-full h-10 px-4 py-2 mt-1 text-sm text-gray-800 border border-gray-300 rounded appearance-none focus:outline-none focus:bg-white focus:border-primary-400', tabindex: 1 %>
      </div>
      <%= f.submit t(".submit_button"), data: { disable: true }, class: "w-full mt-4 text-center btn btn-primary btn-large me-2", tabindex: 2 %>
      <%= render 'shared/recaptcha', v2: @show_checkbox_recaptcha, action: 'user_password_reset' %>
    <% end %>
    <div class="flex p-4 mt-3 bg-gray-100 dark:bg-gray-200 border border-gray-100 dark:border-gray-200 rounded rtl:flex-row-reverse">
      <div class="flex items-center text-lg md:text-2xl">
        <i class="if i-key-light if-fw"></i>
      </div>
      <div class="text-xs ps-4">
        <%= t(".reset_password_help") %>
      </div>
    </div>
    <div class="mt-8 text-center">
      <a tabindex="3" href="/users/sign_in_with_password" class="text-sm p-3 font-medium underline rounded cursor-pointer text-primary-500 hover:bg-primary-50 dark:hover:bg-gray-300/50">
        <%= t(".cancel") %>
      </a>
    </div>
  </div>
</div>
